<template>
	<view class="tab flex align-center justify-around">
		<view class="flex align-center flex-direction" @click="goTab(item.id,item.url)" v-for="(item,index) in tablist"
			:key="index">
			<image :src="tabnumber==item.id?item.icon_select:item.icon" mode="" class="footerimg"></image>
			<view class="text-22" :class="tabnumber==item.id?'':'text-99'">{{item.name}}</view>
		</view>
		<!-- <view class="flex align-center flex-direction" @click="goTab">
			<image :src="tabnumber==2?'/static/board/footer2_select.png':'/static/board/footer2.png'" mode=""
				class="footerimg"></image>
			<view class="text-22" :class="tabnumber==2?'':'text-99'">订单</view>
		</view>
		<view class="flex align-center flex-direction" @click="goTab">
			<image :src="tabnumber==3?'/static/board/footer3_select.png':'/static/board/footer3.png'" mode=""
				class="footerimg"></image>
			<view class="text-22" :class="tabnumber==3?'':'text-99'">会员充值</view>
		</view>
		<view class="flex align-center flex-direction" @click="goTab">
			<image :src="tabnumber==4?'/static/board/footer4_select.png':'/static/board/footer4.png'" mode=""
				class="footerimg"></image>
			<view class="text-22" :class="tabnumber==4?'':'text-99'">我的</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						icon: '/static/board/footer1.png',
						icon_select: '/static/board/footer1_select.png',
						url: '/pages/board/index',
						name:"首页"
					},
					{
						id: 2,
						icon: '/static/board/footer2.png',
						icon_select: '/static/board/footer2_select.png',
						url: '/pages/board/myorder',
						name:"订单"
					},
					{
						id: 3,
						icon: '/static/board/footer3.png',
						icon_select: '/static/board/footer3_select.png',
						url: '/pages/board/memberpay',
						name:"会员充值"
					}, {
						id: 4,
						icon: '/static/board/footer4.png',
						icon_select: '/static/board/footer4_select.png',
						url: '/pages/board/my',
						name:"我的"
					}
				]
			}
		},
		props: {
			tabnumber: {
				type: Number,
				default: 1
			},
		},
		methods: {
			goTab(id, url) {
				if (id == this.tabnumber) {
					return false
				} else {
					uni.redirectTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style>
	.tab {
		width: 658rpx;
		height: 116rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(138, 149, 158, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		position: fixed;
		bottom: 96rpx;
		left: 46rpx;
		right: 46rpx;
		z-index: 999;
	}

	.footerimg {
		width: 44rpx;
		height: 44rpx;
	}
</style>